<template>
  <layout-slot class="bg-gray" :reArticle="reArticle">
    <div class="main-content page-page">
      <div class="search-page">
        <div id="search" class="search-form" role="search">
            <span class="search-box clearfix">
                <input  type="text" v-model="keyword" id="input" class="input" name="s" required="true"
                       placeholder="Search..."
                       maxlength="30" autocomplete="off" @keyup.enter="handleSearch">
                <button style="cursor: pointer" @click="handleSearch" class="spsubmit"><i
                  class="icon-search"></i></button>
            </span>
        </div>
        <div class="search-tags">
          <a v-for="(item,index) of tagList" :class="bgColor[index % bgColor.length]" :href="`/tag/${item.title}`"
             class="text-white "># {{ item.title }}({{ item.size }})</a>
          <div class="search-tags-hr  bg-blue"></div>
        </div>
      </div>
    </div>
  </layout-slot>
</template>

<script>


  import { getLink, getTags } from '~/api/category'
  import { getMoviesDetail, getReArticle, recordCount } from '~/api'

  export default {
    name: "search",

    data() {
      return {
        keyword: "",
        tagList: [],
        bgColor: ['bg-green', 'bg-red', 'bg-blue', 'bg-purple', 'bg-orange', 'bg-yellow'],
        reArticle:[]
      }
    },
    methods: {
      handleSearch() {
        //this.$router.push(`/search/${this.keyword}`)
        if(this.keyword.trim()) {
          window.open(`/search-result/${this.keyword}`, "_self")
        }
      },
      getAllTags() {
        this.$store.commit("setLoading",true)
        getTags().then(({data}) => {

          this.tagList = data.data
          this.$store.commit("setLoading",false)
        })
      }
    },
    mounted() {
      //this.getAllTags()
    },
    async asyncData({app,}){
      let crossList = [],pageInfo = {},links = [],tagList = []
      await getTags(app.$axios).then(({data}) => {
        tagList = data.data
      })
      let reArticle = await getReArticle(app)
      return { reArticle,tagList}
    }
  }
</script>

<style scoped>

</style>
